<template>
	<view class="">
		<c-nav-bar title="船舶位置"></c-nav-bar>
		<view class="map">
			<map class="map" :polygons="polygons" id="container" :longitude='122.45704' :latitude='30.71457' :markers='markers' :scale='10'>
				<view class="search1">
					<view class="search">
						<u-search placeholder="请输入航班次" v-model="keyword" :clearabled="true" :showAction="true"
							actionText="搜索" :animation="true" style="width: 90%;" bgColor='#FFFFFF' @search='search'
							height='58rpx' @custom='search'></u-search>
					</view>

				</view>
				<view class="content">
					<view class="header">
						<view class="top">
							<span>{{shipInfo.startPortName}}</span>
							<span id="img"></span>
							<span>{{shipInfo.endPortName}}</span>
						</view>
						<view class="tips">
							请您耐心等待，船舶正在行驶中
						</view>
					</view>
					<view class="shipInfo">
						<span class="column">
							<span>{{shipInfo.lineNum+''+shipInfo.sx}}次</span>
							<span class="small">航班次</span>
						</span>
						<span class="line"></span>
						<span class="column">
							<span>{{shipInfo.sailTime}}</span>
							<span class="small">开船时间</span>
						</span>
						<span class="line"></span>
						<span class="column">
							<span>{{RealtimeShipPosition.eta||'暂无'}}</span>
							<span class="small">预计到达</span>
						</span>
						<span class="line"></span>
						<span class="column">
							<span>{{shipInfo.clxm}}</span>
							<span class="small">船型</span>
						</span>
					</view>
					<view class="tip">
						<span style="color: orange;">提示：</span>
						<span style="color: #c5c5c5;">泗礁往返沈家湾航程：高速客船约1小时；常规客船约1小时
							30分钟；豪华游轮约1小时30分钟；车客渡约1小时50分钟</span>
					</view>
				</view>
				
			</map>


		</view>
		<view class="popUp">
			<u-popup round='30' safeAreaInsetTop :show="show" mode="bottom" @close="close" @open="open" closeable
				closeOnClickOverlay>
				<view class="searchResult">
					<view class="title">
						查询结果
					</view>
					<scroll-view :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%;">
						<view @click="chooseSearchResult(item)" class="result" v-for="(item,index) in searchResult"
							:key="index">
							{{item.lineNum+''+item.sx}}次{{item.clxm}},{{item.shipName}}号
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>

	</view>

</template>

<script>
	//var amapFile = require('../../utils/amap-wx.130.js');
	export default {
		data() {
			return {
				points: [{
						longitude: 122.45704,
						latitude: 30.71457,
					},
					{
						longitude: 122.757875,
						latitude: 30.708894,
					},
				],
				scrollTop: '',
				show: false,
				keyword: '',
				markers: [{
					id: 1,
					longitude: '',
					latitude: '',
					iconPath: "https://i.ringzle.com/file/20231120/a0774539324143edaa206acdbe32023f.png",
					width: 30,
					height: 34
				}, {
					id: 2,
					longitude: '',
					latitude: '',
					iconPath: "https://i.ringzle.com/file/20231120/d9fb3a7dacf84da4a281c328c1d92775.png",
					width: 30,
					height: 34
				}, {
					id: 3,
					longitude: '',
					latitude: '',
					iconPath: "https://i.ringzle.com/file/20240118/1227d60ba1dc4e8fafb05491d3cb7ce8.png",
					width: 30,
					height: 34
				}, ],
				shipInfo: {},
				RealtimeShipPosition: {},
				searchResult: [],
				polygons: [{ // 路线
					strokeWidth: 1,
					strokeColor: '#67c23a',
					fillColor: '#1791fc66',
					dottedLine: false,
					arrowLine: false,
					level: "abovelabels",
					// 必须要有三个默认属性，并且值不能完全一致，不然报错
					points: [
						{
						latitude: 30.729425,
						longitude: 122.465182
					}, {
						latitude: 30.708894,
						longitude: 122.757875,
					}, {
						latitude: 30.708894,
						longitude: 122.757875
					},
					]
				}],
			}
		},
		onLoad(option) {

			console.log(option, 'this.optionoptionoptionoption');
			this.shipInfo = JSON.parse(option.shipInfo)
			console.log(this.shipInfo, 'this.shipInfothis.shipInfo');
			this.getRealtimeShipPosition(this.shipInfo.shipName, this.shipInfo.startPortNo, this.shipInfo.endPortNo)
			// const setInterval1 = setInterval(this.getRealtimeShipPosition(this.shipInfo.shipName, this.shipInfo
			// 	.startPortNo,
			// 	this.shipInfo
			// 	.endPortNo), 8000);
			//this.drawPolyline()
			
			
		},
		onHide() {
		//	clearInterval(setInterval1)
		},
		methods: {
			// drawPolyline() {
			// 	const map = new AMap.Map('container', {
			// 		zoom: 16,
			// 		center: [122.45704, 30.71457],
			// 	});
			// 	const polyline = new AMap.Polyline({
			// 		path: this.points,
			// 		strokeColor: '#0091ff',
			// 		strokeWeight: 6,
			// 	});
			// 	polyline.setMap(map);
			// },
			chooseSearchResult(item) {
				this.shipInfo = item
				this.getRealtimeShipPosition(this.shipInfo.shipName, )
				this.show = false
			},
			open() {},
			close() {
				this.show = false
			},
			search(value) {
				console.log(value, '*********');
				this.$api.post('/api/apishiprealtimeposition/searchShip', {
					searchBox: value
				}).then(res => {
					if (res.data.code == 0) {
						this.searchResult = res.data.data
						this.show = true
					}
					console.log(res, '***********');
				})
			},
			getRealtimeShipPosition(shipName, startPortNo, endPortNo) {
				this.$api.post('/api/apishiprealtimeposition/realtimeShipPosition', {
					name: shipName,
					startPortNum: startPortNo,
					endPortNum: endPortNo
				}).then((res) => {
					if (res.data.data.shipID) {
						this.RealtimeShipPosition = res.data.data
						this.RealtimeShipPosition.eta = this.RealtimeShipPosition.eta.slice(-5)
						this.markers[0].longitude = res.data.data.startLon
						this.markers[0].latitude = res.data.data.startLat
						this.markers[1].longitude = res.data.data.endLon
						this.markers[1].latitude = res.data.data.endLat
						this.markers[2].latitude = res.data.data.lat
						this.markers[2].longitude = res.data.data.lon
					} else {
						uni.showToast({
							title: '本航班暂无实时航班图！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					console.log(res, '+++++++++');
				})
			},

		}
	}
</script>

<style lang="scss">
	.popUp {
		.searchResult {
			background: #fff;
			max-height: 600rpx;
			width: 100%;

			.title {
				font-size: 30rpx;
				font-weight: 700;
				padding: 7px 20rpx;

			}

			.result {
				border-bottom: #c5c5c5 1rpx solid;
				padding: 24rpx 20rpx;
				width: 100%;
				display: block;
				font-size: small;
				font-weight: 700;
			}
		}
	}

	.map {
		height: 100vh;
		width: 750rpx;
		position: relative;

		.search1 {
			position: relative;

			.search {
				position: fixed;
				top: 198rpx;
				width: 700rpx;
				margin-left: 25rpx;
			}


		}


		.content {
			padding: 30rpx;
			position: absolute;
			bottom: 0;
			background: #fff;
			height: 436rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.shipInfo {
				font-size: 26rpx;
				font-weight: 700;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 52rpx;
				// padding: 80rpx;
				margin: 52rpx 28rpx;
				align-items: center;

				.line {
					border-left: #c5c5c5 1rpx solid;
					height: 100%;
				}

				.small {
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.column {
					display: flex;
					flex-direction: column;
					align-items: center;

				}
			}

			.tip {
				margin: 70rpx 0 30rpx;
				height: 100%;
				border-top: #f5f3f3 1rpx solid;
			}

			.header {
				border-bottom: 1rpx solid #f5f3f3;
				display: flex;
				flex-direction: column;

				.top {
					font-size: 36rpx;
					font-weight: 600;
					display: flex;
					flex-direction: row;
					align-items: center;

					#img {
						background-size: cover;
						margin: 0 10rpx;
						background: url('https://i.ringzle.com/file/20240116/6c5151a584214f6d8acac6dbde12b127.png') no-repeat center;
						width: 51rpx;
						height: 29rpx;
					}
				}

				&>view {}

				.tips {
					color: #a2a2a2;
					margin: 20rpx 0 30rpx;
				}
			}
		}
	}
</style>